/**
 *
 * 修改密码框
 */

'use strict';
var React = require('react');
var ReButton = require('./ReButton.jsx');
var md5=require('../../library/md5.js');
var ReMsgButton=require('./ReMsgButton.jsx');
class HkfsChangePassWord extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            oldPassWord: '',
            newPassWord: '',
            newPassWordAgain: '',
            imgMsg:'',
            agree:true,
            checkMsg: {
                oldPassWord: '请输入六位到十二位数字和字母组合',
                newPassWord: '请输入六位到十二位密码和字母组合',
                newPassWordAgain: '请输入六位到十二位密码和字母组合',
                imgMsg: '请输入4位图片验证码'
            },
            checkPattern: {
                oldPassWord: '(^[\\d\\w]{6,12}$)',
                newPassWord: '(^[\\d\\w]{6,12}$)',
                newPassWordAgain: '(^[\\d\\w]{6,12}$)',
                imgMsg: '(^[\\d\\w]{4}$)'
            },
            checkResult: {
                oldPassWord: true,
                newPassWord: true,
                newPassWordAgain: true,
                imgMsg: true
            }
        };
        this.setOption = this.setOption.bind(this);
        this.checkItems = this.checkItems.bind(this);
        this.getErrorMsgClass=this.getErrorMsgClass.bind(this);
        this.setCheckOption=this.setCheckOption.bind(this);
        this.changeSubmit=this.changeSubmit.bind(this);
        this.renderMsgCodeImg=this.renderMsgCodeImg.bind(this);
    }

    componentDidMount(){
        this.props.msgCodeClick();
    }

    renderMsgCodeImg(){
        if(this.props.loading){
            return <div className="Loading">Loading...</div>
        }
        else{
            return <img src={this.props.msgImgUrl} onClick={this.props.msgCodeClick}/>;
        }
    }

  /*  //检测两次
    checkPassWord(){
        if(this.state.newPassWord!==this.state.newPassWord){
            var obj={};
            obj.checkResult=Object.assign({},this.state.checkResult);
            obj.checkMsg=Object.assign({},this.state.checkMsg);
            obj.checkResult.newPassWordAgain=false;
            obj.checkMsg.newPassWordAgain='两次输入的密码不一致';
            this.setState(obj);
        }
    }
*/
//检测数据
    checkItems() {
        var items = Object.keys(this.state.checkPattern);
        var obj={};
        obj.checkResult=Object.assign({},this.state.checkResult);
        obj.checkMsg=Object.assign({},this.state.checkMsg);
        for (var i = 0; i < items.length; i++) {
            var patternTest = new RegExp(this.state.checkPattern[items[i]], "i");
            if (patternTest.test(this.state[items[i]])) {
                obj.checkResult[items[i]]=true;
            }
            else {
                obj.checkResult[items[i]]=false;
            }
        }
        if(this.state.newPassWordAgain!=''&&this.state.newPassWordAgain!==this.state.newPassWord){
            obj.checkResult.newPassWordAgain=false;
            obj.checkMsg.newPassWordAgain='两次输入的密码不一致';
        }
        else{
            obj.checkMsg.newPassWordAgain='请输入六位到十二位密码和字母组合';
        }
        this.setState(obj);
        //state有可能尚未更新，用state来检测可能会出错，此处提前将检测结果返回供检测函数调用
        return obj;
    }

    //输入值改变
    setOption(objName,event) {
        var obj = {};
        obj[objName] = event.target.value;
        setTimeout(()=>{
            this.setState(obj);
        },0);
    }

    setCheckOption(event){
        this.setState({
            agree:event.target.checked
        })
    }



    getErrorMsgClass(hide){
        if(hide){
            return 'hide';
        }
        else{
            return 'normal'
        }
    }


    //提交密码改动
    changeSubmit(){
        var result = this.checkItems();
        if(result.checkResult.oldPassWord&&result.checkResult.newPassWord&&result.checkResult.newPassWordAgain&&result.checkResult.imgMsg) {
            this.props.submitChange(md5.hex_md5(this.state.oldPassWord), md5.hex_md5(this.state.newPassWord), this.state.imgMsg);
        }
    }


    render() {
        return <div className="HkfsChangePassWordContainer">
            <div className="HkfsRegisterTitle">设置登录密码</div>
            <div>
                <div>
                    <div className="itemTitleDiv">
                        <span className="redStar">*</span><span className="itemName">旧密码</span>
                    </div>
                    <input type="password" placeholder="请输入旧密码" className="commonInput longInput"
                           onChange={this.setOption.bind(this,'oldPassWord')} onBlur={this.checkItems}/>
                </div>
                <div className={this.getErrorMsgClass(this.state.checkResult.oldPassWord)}><div className="itemTitleDiv"></div><span className="errorMsg">{this.state.checkMsg.oldPassWord}</span></div>
            </div>
            <div>
                <div>
                    <div className="itemTitleDiv">
                        <span className="redStar">*</span><span className="itemName">新密码</span>
                    </div>
                    <input type="password" placeholder="请输入新密码" className="commonInput longInput"
                           onChange={this.setOption.bind(this,'newPassWord')}  onBlur={this.checkItems}/>
                </div>
                <div className={this.getErrorMsgClass(this.state.checkResult.newPassWord)}><div className="itemTitleDiv"></div><span className="errorMsg">{this.state.checkMsg.newPassWord}</span></div>
            </div>
            <div>
                <div>
                    <div className="itemTitleDiv">
                        <span className="redStar">*</span>
                        <span className="itemName">确认新密码</span>
                    </div>
                    <input type="password" placeholder="请再次输入新密码" className="commonInput longInput"
                           onChange={this.setOption.bind(this,'newPassWordAgain')}  onBlur={this.checkItems}/>
                </div>
                <div className={this.getErrorMsgClass(this.state.checkResult.newPassWordAgain)}><div className="itemTitleDiv"></div><span className="errorMsg">{this.state.checkMsg.newPassWordAgain}</span></div>
            </div>

            <div>
                <div className="itemTitleDiv">
                    <span className="redStar">*</span><span className="itemName">验证码</span>
                </div>
                <div className="MsgImgDiv">
                    <input placeholder="请输入图片验证码" className="commonInput shortInput"
                           onChange={this.setOption.bind(this,'imgMsg')} onBlur={this.checkItems}/>
                    <div className="MsgImgContent">
                        {this.renderMsgCodeImg()}
                    </div>
                </div>
                <div className={this.getErrorMsgClass(this.state.checkResult.imgMsg)}>
                    <div className="itemTitleDiv"></div>
                    <span className="errorMsg">{this.state.checkMsg.imgMsg}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></div>
            </div>

            <ReButton reClass="submitButton"  reButtonClick={this.changeSubmit}>确认提交</ReButton>

        </div>
    }
}

module.exports = HkfsChangePassWord;
